<template>
  <div>
    <el-form  ref="formData" :model="formData" :rules="rules" label-width="100px" class="login-box">
      <h3 class="login-title">教师信息填写</h3>
      <el-row :gutter="10">
        <el-col :span="20">
          <el-form-item prop="tname" label="姓名">
            <el-input maxlength="20" size="medium" v-model="formData.tname" placeholder="请输姓名" type="text" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="40">
          <el-form-item prop="sex" label="性别">
            <el-select v-model="formData.sex" class="el-select" >
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item prop="sfz" label="身份证">
            <el-input maxlength="18" size="medium" v-model="formData.sfz" placeholder="输入身份证号" type="text" clearable/>
          </el-form-item>
        </el-col>

        <el-col :span="20">
          <el-form-item prop="tqc" label="教师资格证">
            <el-input maxlength="17" size="medium" v-model="formData.tqc" placeholder="输入教师资格证号 " type="text"  clearable/>
          </el-form-item>
        </el-col>

        <el-col :span="40">
          <el-form-item prop="edubgd" label="学历">
            <el-select v-model="formData.edubgd" placeholder="请选择" class="el-select">
              <el-option label="专科" value="专科"></el-option>
              <el-option label="本科" value="本科"></el-option>
              <el-option label="研究生" value="研究生"></el-option>
              <el-option label="博士" value="博士"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="20">
          <el-form-item prop="profession" label="专业">
            <el-input maxlength="20" size="medium" v-model="formData.profession" placeholder="请输入专业" type="text"  clearable/>
          </el-form-item>
        </el-col>

        <el-col :span="20">
          <el-form-item prop="email" label="邮箱">
            <el-input maxlength="20" size="medium" v-model="formData.email" placeholder="请输邮箱" type="text" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item prop="intro" label="简介">
            <el-input maxlength="20" size="medium" v-model="formData.intro" type="textarea" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="20">

        </el-col>
        <el-col :span="20">
          <el-form-item>
            <el-button type="primary" round class="btnlocation" @click="Register('formData')" >提交</el-button>
            <el-button class="btnlocation" round @click="goBack">返回</el-button></el-form-item>
        </el-col>

      </el-row>

    </el-form>
  </div>

</template>

<script>
  export default {
    name: "TeacherInfo",
    data(){
      var checkEmail = (rule, value, callback) => {
        const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
        if (!value) {
          return callback(new Error('邮箱不能为空'))
        }
        setTimeout(() => {
          if (mailReg.test(value)) {
            callback()
          } else {
            callback(new Error('请输入正确的邮箱格式'))
          }
        }, 100)
      };
      let idCardValidity = (rule, code, callback) => {
        var city = { 11: "北京", 12: "天津", 13: "河北", 14: "山西", 15: "内蒙古", 21: "辽宁", 22: "吉林", 23: "黑龙江 ", 31: "上海", 32: "江苏", 33: "浙江", 34: "安徽", 35: "福建", 36: "江西", 37: "山东", 41: "河南", 42: "湖北 ", 43: "湖南", 44: "广东", 45: "广西", 46: "海南", 50: "重庆", 51: "四川", 52: "贵州", 53: "云南", 54: "西藏 ", 61: "陕西", 62: "甘肃", 63: "青海", 64: "宁夏", 65: "新疆", 71: "台湾", 81: "香港", 82: "澳门", 91: "国外 " };
        var tip = ""
        var pass = true

        if (!code || !/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i.test(code)) {
          tip = "身份证号格式错误"
          pass = false;
        } else if (!city[code.substr(0, 2)]) {
          tip = "地址编码错误"
          pass = false
        } else {
          // 18位身份证需要验证最后一位校验位
          if (code.length === 18) {
            code = code.split('')
            // ∑(ai×Wi)(mod 11)
            // 加权因子
            var factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]
            // 校验位
            var parity = [1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2]
            var sum = 0
            var ai = 0
            var wi = 0
            for (var i = 0; i < 17; i++) {
              ai = code[i]
              wi = factor[i]
              sum += ai * wi
            }
            var last = parity[sum % 11];
            if (parity[sum % 11] != code[17]) {
              tip = "身份证号校验位错误"
              pass = false
            }
          }
        }
        if (!pass) {
          callback(new Error(tip))
        } else {
          callback()
        }
        // if (!pass) alert(tip)
        // return pass
      }
      return{
        formData: {
          tid: '',
          tname: '',
          sex: '',
          edubgd: '',
          profession: '',
          star: 1,
          sfz: '',
          tqc: '',
          intro: '',
          email: '',
          isverify: 0
        },
        rules: {
          tname: [
            {required: true, message: '姓名不可为空', trigger: 'blur'}
          ],
          sex: [
            {required: true,message: '性别不可为空', trigger: 'blur'}
          ],
          edubgd: [
            {required: true,message: '学历不可为空', trigger: 'blur'}
          ],
          profession: [
            {required: true,message: '专业不可为空', trigger: 'blur'}
          ],
          sfz: [{ required: true, message: '请输入证件号', trigger: 'blur' },
            { validator: idCardValidity, trigger: 'blur' }],
          tqc: [
            {required: true,message: '教师资格证不可为空', trigger: 'blur'}
          ],
          email: [
            {required: true,validator:checkEmail, trigger: 'blur'}
          ]
        },
      }
    },
    methods: {
      Register(formData){
        this.$refs[formData].validate(valid =>{
          if(valid){
            this.formData.tid = sessionStorage.getItem("uid");
            this.$axios
              .post("/updateteacher",this.formData)
              .then(res =>{
                if(res.data.code === 200){
                  this.$message({
                    type: 'success',
                    message: '您已注册成功'
                  });
                  this.$router.replace("/");
                  window.sessionStorage.clear();
                }else {
                  this.$message({
                    type: 'error',
                    message: res.data.msg
                  });
                }
              })
          }
        })
      },
      goBack(){
        this.$router.push("/");
        sessionStorage.clear();
      }
    }
  }
</script>

<style lang="scss" scoped>
  .login-box {
    border: 10px solid #DCDFE6;
    width: 450px;
    margin: 200px auto;
    padding: 50px 50px 40px 60px;
    border-radius: 20px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 5px;
    box-shadow: 0 0 25px #909399;
  }
  .login-title {
    text-align: center;
    margin: 0 0 20px 20px;
    color: #303133;
  }
  .btnlocation{
    margin: 8px 35px 10px auto;
  }
  .el-radio{
    margin: 8px 35px 10px auto;
  }
</style>

